<template>
	<!-- 创建订单 -->
	<view class="create-order-page">
		<view class="order-info">
			<!-- 商品名称 -->
			<view class="goods-info">
				<text>{{goodsInfo.Name}} </text>
				<text v-if="[12,13].includes(goodsInfo.Type)" class="spec">{{goodsInfo.spec}}</text>
				<text v-if="[12,13].includes(goodsInfo.Type)" class="price"><text
						class="symbol">¥</text>{{goodsInfo.ShowPrice || 0}}</text>
			</view>
			<!-- 单时间选择 -->
			<view class="row b-b" v-if="[11,14,15,16].includes(goodsInfo.Type)">
				<text class="tit">使用日期</text>
				<view class="date-list-wap">
					<view class="date-list" :class="{'active':activeIndex === index}" v-for="(item,index) in dateList"
						:key="index" @click="handleChange(index)">
						<view class="date-title">{{item.title}}{{item.date}}</view>
						<view class="date-price" v-if="[14].includes(goodsInfo.Type)">
							<text class="symbol">¥</text>{{item.price}}
						</view>
					</view>
				</view>
				<navigator
					:url="'/mall_subpages/calendar/calendar?dateListItem='+ encodeURIComponent(JSON.stringify(dateList[activeIndex]))">
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</navigator>
			</view>
			<!-- 单时间选择 end-->
			<view class="row b-b" v-if="[11,16].includes(goodsInfo.Type)">
				<text class="tit">选择时间</text>
				<view class="date-list-wap">
					<picker class="picTime" @change="bindPickerChange" :value="pIndex" range-key="value"
						:range="specListSelectData">
						<view class="uni-input">{{specListSelectData[pIndex].StartTime}} -
							{{specListSelectData[pIndex].EndTime}}
						</view>
					</picker>
				</view>
			</view>
			<!-- 范围时间选择 -->
			<view class="row b-b" v-if="[13].includes(goodsInfo.Type)">
				<navigator class="date-list-wap date-wap"
					:url="'/mall_subpages/calendar/calendar2?dateDetail='+ encodeURIComponent(JSON.stringify(dateDetail))">
					<view class="flex-item statStr">
						<view class="subTitle">入住</view>
						<view style="display: flex;justify-content: space-between;">{{dateDetail.startStr.dateStr}}
							<text class="subTitle pdl-20"
								style="padding-right: 20rpx;">{{dateDetail.startStr.recent}}</text>
						</view>
					</view>
					<view class="dayCount">
						共{{dateDetail.dayCount}}晚
					</view>
					<view class="flex-item endStr">
						<view class="subTitle">离店</view>
						<view style="display: flex;justify-content: space-between;">{{dateDetail.endStr.dateStr}} <text
								class="subTitle pdl-20">{{dateDetail.endStr.recent}}</text></view>
					</view>
				</navigator>
			</view>
			<!-- 范围时间选择 end-->
			<view class="row b-b">
				<text class="tit" v-if="goodsInfo.Type === 13">房间数量</text>
				<text class="tit" v-else>选择数量</text>
				<uni-number-box :min="1" :value="params.Count" @change="change" />
			</view>
			<block v-if="[12].includes(goodsInfo.Type)">
				<view class="row b-b">
					<text class="tit">联系人</text>
					<input class="input" type="text" v-model="personData.Name" placeholder="联系人姓名"
						placeholder-class="placeholder" />
					<navigator url="/user_subpages/person/person?source=1">
						<uni-icons class="pdl-20" type="personadd" size="24" color="rgb(241,168,73)"></uni-icons>
					</navigator>
				</view>
				<view class="row b-b">
					<text class="tit">手机号</text>
					<input class="input" type="number" v-model="personData.Mobile" placeholder="联系人手机号码"
						placeholder-class="placeholder" />
				</view>
			</block>
			<view class="row b-b" style="border: none;">
				<text class="tit">备注</text>
				<input class="input" v-model="params.OrderRemak" placeholder="请填写备注信息"
					placeholder-class="placeholder" />
			</view>

			<view class="grayLine"></view>
		</view>

		<view class="order-info grayInfo" v-if="[11,13,14,15,16].includes(goodsInfo.Type)">
			<view style="padding-bottom:10rpx;color: #111;padding-top: 20rpx;"><span
					style="margin-left: 4%;font-weight: bold;">游客信息</span></view>
			<view class="row b-b" style="border: none;" v-for="(item,index) in personList" :key="index">
				<view @click="handleDel(item,index)">
					<text class="">游客{{index+1}}</text>
					<view v-if="item.Name">
						<uni-icons class="pdl-20" type="close" size="16" color="#999"></uni-icons>
					</view>
				</view>
				<view v-if="item.Name">
					<view>{{item.Name}} - {{item.Mobile}}</view>
					<view>{{item.CardNo}}</view>
				</view>
				<view v-else>
					<navigator :url="'/user_subpages/person/person?source=1&index='+index">
						<text class="tip">点击选择游客</text>
					</navigator>
				</view>
				<navigator :url="'/user_subpages/person/person?source=1&index='+index">
					<uni-icons class="pdl-20" type="personadd" size="24" color="#498FFF"></uni-icons>
				</navigator>
			</view>

		</view>

		<view class="grayLine" v-if="this.shopCoupon.length>0 || this.allCoupon.length>0"></view>
		<!-- <view class="grayLine" v-else></view> -->

		<!-- 优惠券 -->
		<view class="couponArea">
			<view class="couponTitle" v-if="this.shopCoupon.length>0">商家券</view>
			<view class="couponList" v-if="this.shopCoupon.length>0">
				<view class="couponItem" :class="{'activeCoupon': isChangeShop == index}"
					v-for="(item,index) in shopCoupon" :key='index' @click="selectCoupon(index,item)">
					<!-- {{item.CouponName}} -->
					满{{item.CouponTemple.MinimumConsumption}}减{{item.CouponTemple.FullReduceAmount}}
				</view>
			</view>

			<view class="couponTitle" v-if="this.allCoupon.length>0">平台券</view>
			<view class="couponList" v-if="this.allCoupon.length>0">
				<view class="couponItem" :class="{'activeCoupon': isChangeAll == index}"
					v-for="(item,index) in allCoupon" :key='index' @click="selectAllCoupon(index,item)">
					<!-- {{item.CouponName}} -->
					满{{item.CouponTemple.MinimumConsumption}}减{{item.CouponTemple.FullReduceAmount}}
				</view>
			</view>
		</view>

		<view class="grayLine"></view>


		<view class="order-desc">
			<view class="d-header">
				<text style="font-weight: bold;font-size: 28rpx;">预定须知</text>
			</view>
			<mp-html style="background-color: #F8F8F8;" :content="goodsInfo.BookingNotice" />
		</view>

		<!-- <view class="line"></view> -->


		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text style="font-size: 26rpx;">订单金额</text>
				<text class="price-tip">￥</text>
				<text class="price">{{ sunPrice }}</text>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		forEach,
		dateFtt,
		floatMul,
		deepClone
	} from '@/utils/tools.js'
	import {
		addEleCouponOrders,
		getUsersContactsList
	} from '@/api/mall.js'
	import {
		GetUserCoupons
	} from '@/api/homePage.js'
	import Config from '@/config/index.js'
	// import wx from 'weixin-js-sdk'
	export default {
		data() {
			return {
				orderList: '',
				shopCoupon: [],
				allCoupon: [],
				useShopCoupon: '',
				useAllCoupon: '',
				isChangeShop: -1,
				isChangeAll: -1,
				payType: 1, //1微信 2支付宝
				activeIndex: 0,
				orderSubmit: false, // 是否允许订单提交
				defaultDataList: [], // 保存一份默认数据，回复今天、明天、后天
				dateList: [],
				dateDetail: {
					startStr: {
						dateStr: '2021-9-17',
						recent: '今天'
					},
					endStr: {
						dateStr: '2021-9-18',
						recent: '明天'
					},
					dayCount: 1
				},
				week: 0,
				pIndex: 0,
				ProductSpecList: [],
				personData: {
					Name: '',
					Mobile: ''
				},
				personList: [{}],
				params: {
					Count: 1,
					OrderRemak: ''
				},
			}
		},
		filters: {
			toFixd(e) {
				let price = e * 1 || 0
				return price.toFixed(2)
			}
		},
		computed: {
			...mapState({
				// 产品信息
				goodsInfo: state => state.shop.goodsInfo,
				// 用户信息
				userInfo: state => state.base.userInfo,

			}),
			// 订单金额
			sunPrice() {
				console.log('this.goodsInfo', this.goodsInfo)
				let g = this.goodsInfo.ShowPrice * 1
				// 若为酒店类型 = 单价 * 房间数 * 天数
				let totalPrice = 0;
				if (this.goodsInfo.Type === 13) {
					totalPrice = floatMul(floatMul(g, this.params.Count), this.dateDetail.dayCount)
				} else {
					totalPrice = floatMul(g, this.params.Count)
				}
				// 商品券满减
				if (this.useShopCoupon && Object.keys(this.useShopCoupon).length > 0) {
					const FullReduceAmount = this.useShopCoupon?.CouponTemple?.FullReduceAmount;
					const MinimumConsumption = this.useShopCoupon?.CouponTemple?.MinimumConsumption;
					if (totalPrice >= MinimumConsumption) {
						if (totalPrice >= FullReduceAmount) {
							totalPrice -= FullReduceAmount
						} else {
							totalPrice = 0.00
						}
					}
				}
				// 平台券满减
				if (this.useAllCoupon && Object.keys(this.useAllCoupon).length > 0) {
					const FullReduceAmount = this.useAllCoupon?.CouponTemple?.FullReduceAmount;
					const MinimumConsumption = this.useAllCoupon?.CouponTemple?.MinimumConsumption;
					if (totalPrice >= MinimumConsumption) {
						if (totalPrice >= FullReduceAmount) {
							totalPrice -= FullReduceAmount
						} else {
							totalPrice = 0.00
						}
					}
				}
				totalPrice = Math.round(totalPrice * 100) / 100
				return totalPrice
			},
			// 时间选择器数据
			specListSelectData() {
				const week = this.week === 0 ? '7' : String(this.week)
				return this.ProductSpecList.filter(item => {
					try {
						console.log(item.OpenType.includes(week))
						// return item.OpenType.includes(week) || item.OpenType.includes('8')
						return true
					} catch (e) {
						return false
					}

				})
			}
		},
		onLoad(option) {
			this.getCoupon()
			this.dateDetail.startStr.dateStr = dateFtt("yyyy-MM-dd", new Date());
			this.dateDetail.endStr.dateStr = dateFtt('yyyy-MM-dd', new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
			if (!this.goodsInfo.Type) {
				uni.switchTab({
					url: '/mall_subpages/reservation'
				})
				return
			}
			this.initDateList()
			// 票务类型 数据梳理
			if (this.goodsInfo.Type === 11 || this.goodsInfo.Type === 16) {
				console.log('this.goodsInfo.ProductSpecList', this.goodsInfo.ProductSpecList)
				this.ProductSpecList = this.goodsInfo.ProductSpecList.map(item => {
					console.log('item', item)
					console.log('StartTime', item.StartTime)
					console.log('EndTime', item.EndTime)
					return {
						...item,
						value: `${item.StartTime}-${item.EndTime}`,
						OpenTypeArr: item.OpenType ? item.OpenType.split(',') : []
					}
				})
				console.log(this.ProductSpecList)
				this.week = this.dateList[this.activeIndex].week
				this.dateList[this.activeIndex].end_date = this.ProductSpecList[this.pIndex].EndDate;
				try {
					this.goodsInfo.ShowPrice = this.specListSelectData[this.pIndex].Price
				} catch (e) {
					this.goodsInfo.ShowPrice = 0
				}
				this.$forceUpdate()
			}
			console.log('888', this.goodsInfo)
			this.initPerson()
			//#ifdef H5
			this.$jwx.initJssdk()
			//#endif
		},
		methods: {
			//获取用户已有的优惠券
			async getCoupon() {
				const OrdersProductList11 = []
				const shopArr = []
				try {
					const {
						Data
					} = await GetUserCoupons({
						Index: 1,
						Size: 10,
						BusinessId: this.goodsInfo.BusinessId,
						CouponStatus: 1
					})
					// this.myCoupon=Data;	
					var b = Data
					var cc = []
					var dd = []
					console.log(1, Data);
					Data.forEach((item) => {
						if (!item.BusinessIds) {
							dd.push(item)
						} else {
							cc.push(item)
						}
					})
					//筛选没过期的优惠劵
					let ShopYHJ = [];
					cc.forEach(con => {
						let Starttime = Date.parse(con.EffectStartDatetime)
						let timestamp = Date.parse(con.EffectEndDatetime)
						let date = Date.parse(new Date());
						if (date < timestamp && date > Starttime) {
							ShopYHJ.push(con)
						}
					})
					this.shopCoupon = ShopYHJ;
					let AllYHJ = [];
					dd.forEach(con => {
						let Starttime = Date.parse(con.EffectStartDatetime)
						let timestamp = Date.parse(con.EffectEndDatetime)
						let date = Date.parse(new Date());
						if (date < timestamp && date > Starttime) {
							AllYHJ.push(con)
						}
					})
					this.allCoupon = AllYHJ;
					console.log('!!!', this.shopCoupon, this.allCoupon)
				} catch (e) {
					//TODO handle the exception
				}
			},
			selectCoupon(index, item) {
				if (index != this.isChangeShop) {
					console.log('!!', this.sunPrice)
					if (item.CouponTemple.MinimumConsumption > this.sunPrice) {
						uni.showToast({
							title: '不满足使用条件',
							icon: 'none',
							duration: 2000
						})
					} else {
						this.isChangeShop = index
						this.useShopCoupon = item
					}
				} else {
					this.isChangeShop = -1
					this.useShopCoupon = ''
				}
			},
			selectAllCoupon(index, item) {
				if (index != this.isChangeAll) {
					if (item.CouponTemple.MinimumConsumption > this.sunPrice) {
						uni.showToast({
							title: '不满足使用条件',
							icon: 'none',
							duration: 2000
						})
					} else {
						this.isChangeAll = index
						this.useAllCoupon = item;
						console.log(item, index)
					}
				} else {
					this.isChangeAll = -1
					this.useAllCoupon = ''
				}
			},
			// 获取收获地址
			async initPerson() {
				let parma = {
					Index: 1,
					Size: 10
				}

				try {
					const {
						Data
					} = await getUsersContactsList(parma)
					if (Data.length > 0) {
						const person = Data.find(row => row.IsDefault === 1) || Data[0]
						if ([12].includes(this.goodsInfo.Type)) {
							this.personData = person
						} else {
							this.personList.splice(0, 1, person)
						}
					}
				} catch (e) {
					//TODO handle the exception
				}

			},

			// 初始化时间列表
			initDateList() {
				const date = new Date()
				const dateList = [{
						title: '今天',
						week: date.getDay(),
						_date: dateFtt("yyyy-MM-dd", new Date()),
						date: dateFtt("M-dd", new Date()),
						price: this.goodsInfo.ShowPrice,
						end_date:'',
					},
					{
						title: '明天',
						_date: dateFtt("yyyy-MM-dd", new Date(date.getTime() + 24 * 60 * 60 * 1000)),
						date: dateFtt('M-dd', new Date(date.getTime() + 24 * 60 * 60 * 1000)),
						week: new Date(date.getTime() + 24 * 60 * 60 * 1000).getDay(),
						price: this.goodsInfo.ShowPrice,
						end_date:'',
					},
					{
						title: '后天',
						_date: dateFtt("yyyy-MM-dd", new Date(date.getTime() + 48 * 60 * 60 * 1000)),
						date: dateFtt('M-dd', new Date(date.getTime() + 48 * 60 * 60 * 1000)),
						week: new Date(date.getTime() + 48 * 60 * 60 * 1000).getDay(),
						price: this.goodsInfo.ShowPrice,
						end_date:'',
					},
				]
				this.defaultDataList = deepClone(dateList)
				this.dateList = dateList
			},
			bindPickerChange(e) {
				this.pIndex = e.detail.value
				this.goodsInfo.ShowPrice = this.specListSelectData[this.pIndex].Price
			},
			// 处理删除游客信息
			handleDel(item, index) {
				if (!item.Name) return
				this.personList.splice(index, 1)
				this.personList.unshift({})
			},
			// 商品数量改变
			change(value) {
				if (value < 1) {
					value = 1
				}
				this.params.Count = value
				this.changePersonList(value)

			},
			// 更具门票数量修改personList
			changePersonList(value) {
				console.log(value)
				// 计算门票数量与人员数量差值
				const diff = value - this.personList.length
				if (diff > 0) {
					for (let i = 0; i < diff; i++) {
						this.personList.unshift({})
					}
				} else if (diff < 0) {
					this.personList.splice(0, Math.abs(diff))
				}
			},
			// 添加联系人信息
			addPersonInfo({
				person,
				index
			}) {
				// 餐饮 单人  
				// 门票 酒店 多人
				if (this.goodsInfo.Type === 12) {
					this.personData = person
				} else {
					const hasIndex = this.personList.findIndex(item => item.Name)
					if (hasIndex <= 0) {
						this.personList[this.personList.length - 1] = person
					} else {
						if (hasIndex > index) {
							this.personList[hasIndex - 1] = person
						} else {
							this.personList[index] = person
						}
					}
				}

				this.$forceUpdate()
			},
			// 设置详情列表
			setDateList({
				date,
				_date,
				type
			}) {
				if (type === 1) {
					this.activeIndex = 2
					this.week = new Date(_date).getDay()
					this.dateList[2] = {
						title: '已选',
						date,
						_date,
						week: this.week,
						price: this.goodsInfo.ShowPrice,
						end_date:this.ProductSpecList[this.pIndex].EndDate,
					}
				} else {
					this.dateDetail = date
				}
				this.$forceUpdate()
			},
			// 日期选择改变
			handleChange(index) {
				this.activeIndex = index
				this.week = this.dateList[index].week
				this.$forceUpdate()
				this.resetDateList(index)

			},
			// 回复默认今天、明天、后天状态
			resetDateList(index) {
				let tarSel = this.dateList.find(item => item.title === "已选")
				if (tarSel) {
					let itm = this.dateList[index]
					if (itm._date === tarSel._date && (itm.title === '今天' || itm.title === '明天' || itm.title === '后天')) {
						this.dateList = deepClone(this.defaultDataList)
					}
				}
			},
			// 提交订单
			async submit() {
				console.log(this.dateList[this.activeIndex])
				if (!this.goodsInfo.Type) {
					return
				}
				if (this.useShopCoupon && this.useShopCoupon.CouponTemple.MinimumConsumption > this.sunPrice) {
					uni.showToast({
						title: '不满足使用条件',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.useAllCoupon && this.useAllCoupon.CouponTemple.MinimumConsumption > this.sunPrice) {
					uni.showToast({
						title: '不满足使用条件',
						icon: 'none',
						duration: 2000
					})
					return
				}
				console.log(this.params, this.goodsInfo.BusinessId, this.goodsInfo.ProductId, this.goodsInfo
					.ProductSpecId, this.dateList[this.activeIndex]._date);
				const params = {
					...this.params,
					"BusinessId": this.goodsInfo.BusinessId,
					"ProductId": this.goodsInfo.ProductId,
					"ProductSpecId": this.goodsInfo.ProductSpecId,
					"SelfOrLogs": '',
					"RoomCount": 0,
					"LocalBusinessId": '',
					"OrderStartDate": this.dateList[this.activeIndex]._date,
					"OrderEndDate": '',
					"ContactPerson": [],
					"ContactPhone": [],
					"IDCards": [],
				}
				// 多人员订单 
				if ([11, 13, 14, 15,16].includes(this.goodsInfo.Type)) {
					if (!this.personList.every(item => item.Name)) {
						this.$api.msg('请选择联系人');
						return
					}
					params.Persons = this.personList.map(item => {
						return {
							"Name": item.Name,
							"Mobile": item.Mobile,
							"IDCard": item.CardNo
						}
					})
					//票务或者活动
					if (this.goodsInfo.Type === 11 || this.goodsInfo.Type === 16) {
						const pspe = this.specListSelectData[this.pIndex]
						params.ProductId = pspe.ProductId
						params.ProductSpecId = pspe.Id
					}

					// 酒店
					if (this.goodsInfo.Type === 13) {
						params.RoomCount = params.Count
						params.OrderStartDate = this.dateDetail.startStr.dateStr
						params.OrderEndDate = this.dateDetail.endStr.dateStr
					}

					// 单一人员订单
				} else if ([12].includes(this.goodsInfo.Type)) {

					if (!this.personData.Name) {
						this.$api.msg('请填写联系人姓名');
						return;
					}

					if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.personData.Mobile)) {
						this.$api.msg('请输入正确的手机号码');
						return;
					}

					params.Persons = [{
						"Name": this.personData.Name,
						"Mobile": this.personData.Mobile,
						"IDCard": this.personData.CardNo
					}]
				}
				var useCoupons = []

				if (this.useShopCoupon) {

					useCoupons.push({
						CouponCode: this.useShopCoupon.CouponCode,
						BusinessId: this.goodsInfo.BusinessId
					})
				}
				if (this.useAllCoupon) {
					useCoupons.push({
						CouponCode: this.useAllCoupon.CouponCode,
						BusinessId: 0
					})
				}


				uni.showLoading({
					title: '提交中',
					mask: true
				})

				try {
					const Params = {}
					Params.OrderProductList = [params]
					Params.Coupons = useCoupons
					console.log('@@@', Params)
					const {
						Data
					} = await addEleCouponOrders(Params)
					this.handlePay(Data)
					uni.hideLoading()
				} catch (e) {
					uni.hideLoading()
					this.$api.msg(e.Msg);
					//TODO handle the exception
				}
			},
			handlePay(Data) {
				console.log(123, Data);
				const param = JSON.parse(Data.WxJsApiParam)
				if (!param) {
					uni.reLaunch({
						url: '/mall_subpages/order/order'
					})
					return
				}
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: param.timeStamp,
					nonceStr: param.nonceStr,
					package: param.package,
					signType: param.signType,
					paySign: param.paySign,
					success: function(res) {
						uni.reLaunch({
							url: '/mall_subpages/order/order'
						})
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
				// this.$jwx.wxpay({
				// 	timestamp: param.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
				// 	nonceStr: param.nonceStr, // 支付签名随机串，不长于 32 位  
				// 	package: param.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）  
				// 	signType: param.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
				// 	paySign: param.paySign, // 支付签名 
				// },function(res){
				// 	uni.reLaunch({
				// 		url: '/subpages/order/order'
				// 	})
				// })
			}
		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	.create-order-page {
		min-height: 100vh;
		padding-top: 30rpx;
		padding-bottom: 100rpx;
		background-color: #f8f8f8;

		/deep/ .uni-picker-action-confirm {
			color: #d7b57c !important;
		}
	}

	.line {
		width: 100%;
		height: 20rpx;
		background-color: #e9e9e9;
	}

	.grayLine {
		width: 100%;
		height: 15rpx;
		background-color: #e9e9e9;
	}

	.couponArea {

		width: 100%;
		// margin-left: 3%;
		background-color: #f8f8f8;
		margin-top: 30rpx;
		border-radius: 10rpx;

		// padding: 20rpx;
		.couponTitle {
			color: #111;
			padding-left: 4%;
		}
	}

	.couponList {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 30rpx;

		.couponItem {
			padding: 0 20rpx;
			height: 60rpx !important;
			line-height: 60rpx !important;
			border-radius: 10rpx;
			color: #F8F8F8;
			margin-left: 4%;
			font-size: 30rpx;
			margin-top: 20rpx;
			background-color: rgb(175, 174, 175);
		}

		.activeCoupon {
			color: snow;
			background:#498FFF;
		}

		// .couponItemCheck{
		// 	color: red;
		// }

	}

	.grayInfo {
		background-color: #f8f8f8;


		border-radius: 10rpx;
		// border-bottom: 4rpx solid #e9e9e9;
	}

	.order-desc {
		background-color: #f8f8f8;
		width: 90%;
		margin-left: 4%;
		color: #111;
		border-radius: 10rpx;
	}

	.order-info {

		position: relative;

		font-size: $uni-font-size-base;

		// &:after {
		// 	content: '';
		// 	position: absolute;
		// 	bottom: 0;
		// 	left: 0;
		// 	height: 20rpx;
		// 	width: 100%;
		// 	background:#e9e9e9;
		// }
		.row {
			color: #111;
			display: flex;
			// width: 92%;
			// margin-left: 4%;
			align-items: center;
			padding: 40rpx 4%;
			box-sizing: border-box;
			border-bottom: 2rpx solid #d0d0d0;

			.tit {
				width: 200rpx;
				font-weight: bold;
			}

			&.b-b {
				justify-content: space-between;
			}

			.pdl-20 {
				padding-left: 20rpx;
			}

			input {
				flex: 1;
				text-align: left;
			}

			.tip {
				color: #498FFF;
			}

			/deep/ .uni-numbox {
				height: 30px;
				// line-height: 30px;

				.uni-numbox__plus,
				.uni-numbox__value,
				.uni-numbox__minus {
					height: 30px;
					line-height: 30px;
				}

				.uni-numbox__plus {
					background: #498FFF;
				}

				.uni-numbox__minus {
					background: #eee;
				}

				.uni-numbox__value {
					border: 0;
					background: #f6f6f6;
				}
			}

			.subTitle {
				font-size: $uni-font-size-base;
				color: #999;
			}
		}

		.goods-info {
			// margin-top: 30rpx;
			width: 92%;
			margin-left: 4%;
			padding: 40rpx 20rpx;
			background: rgb(236, 236, 236);
			color: #111;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;

			.price {
				font-size: $uni-font-size-base;
				color: #498FFF;
				font-weight: 700;
			}

			.symbol {
				font-size: $uni-font-size-sm - 6rpx;
			}
		}

		.uni-input /deep/ .uni-picker-container {
			color: red !important;
		}

		.date-list-wap {
			display: flex;

			.picTime {
				/deep/ .uni-picker-action-confirm {
					color: #d7b57c !important;
				}
			}

			/deep/ .uni-picker-action-confirm {
				color: #d7b57c !important;
			}

			.uni-picker-container .uni-picker .uni-picker-action-confirm {
				color: #d7b57c !important;
			}

			.date-list {
				margin-left: 6rpx;
				padding: 16rpx;
				border: 1px solid #eee;
				border-radius: 8rpx;
			}

			.active {
				background: #498FFF;
				border: none;

				.date-title,
				.date-price {
					color: #fff;
				}
			}

			.date-title {
				font-size: $uni-font-size-sm - 4rpx;
				white-space: nowrap;
				text-align: center;
			}

			.date-price {
				text-align: center;
				font-weight: bold;
				font-size: $uni-font-size-base;
				color: #eb8a3e;
				padding-top: 10rpx;

				.symbol {
					font-weight: normal;
					font-size: $uni-font-size-sm - 10rpx;
				}
			}

			&.date-wap {
				width: 100%;
				justify-content: space-between;

				.flex-item {
					flex: 1
				}

				.dayCount {
					color: #111;
					border: 2rpx solid #111;
					margin: 20rpx 20rpx 20rpx 0;
					font-size: 30rpx;
					height: 50rpx;
					line-height: 50rpx;
					padding: 0 20rpx;
					border-radius: 30rpx;
				}
			}
		}
	}

	.pay-list {
		padding-left: 40rpx;
		margin-top: 16rpx;
		background: #fff;

		.pay-item {
			display: flex;
			align-items: center;
			padding-right: 20rpx;
			line-height: 1;
			height: 110rpx;
			position: relative;
		}

		.icon-weixinzhifu {
			width: 80rpx;
			font-size: 40rpx;
			color: #6bcc03;
		}

		.icon-alipay {
			width: 80rpx;
			font-size: 40rpx;
			color: #06b4fd;
		}

		.icon-xuanzhong2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			font-size: 40rpx;
			color: $base-color;
		}

		.tit {
			// font-weight: bold;
			font-size: 32rpx;
			color: $font-color-dark;
			flex: 1;
		}
	}

	.d-header {
		padding: 20rpx 40rpx 20rpx 0;
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90rpx;
		justify-content: space-between;
		font-size: 30rpx;
		background-color: #f8f8f8;
		z-index: 998;
		color: #111;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

		.price-content {
			padding-left: 30rpx;
		}

		.price-tip {
			color: #498FFF;
			margin-left: 8rpx;
		}

		.price {
			font-size: 42rpx;
			color: #498FFF;
			font-weight: bold;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280rpx;
			height: 100%;
			color: #fff;
			font-size: 32rpx;
			background: #498FFF !important;
		}
	}
</style>